import React from 'react';
import Icon from '../Icon';
import styles from './index.less';
import classnames from 'classnames';
interface Props {
    icon?: string | React.ReactNode;
    title: string;
    disabled?: boolean;
    onClick?: () => void;
    hasBorder?: false,
    className?: string;
}
const ListItem:React.SFC<Props> = ({
    title,
    disabled,
    onClick,
    hasBorder = true,
    className,
    icon,
}) => {
    const handleClick = () => {
        if(disabled) return;
        typeof onClick === 'function' && onClick();
    }
    return <div className={classnames(styles.listItem, className, {[styles.noBorder]: !hasBorder})} onClick={handleClick}> 
        {icon && <div className={styles.icon}>
            {typeof icon === 'string' ? <Icon type={icon} /> : <React.Fragment>{icon}</React.Fragment> }
        </div>
        }
        <div className={`${styles.title} lb-listItem-title`}>
            <span className={`${styles.primaryTitle} lb-listItem-primaryTitle`}>
                {title}
            </span>
        </div>
    </div>
}
export default ListItem;